<template>
  <form @submit.prevent="submit">
    <section class="content">
      <h2>{{title}}</h2>
      <!-- main content -->
      <slot></slot>
      <div class="actions">
        <!-- action buttons -->
        <slot name="actions"></slot>
      </div>

      <div class="error" v-if="error">{{error}}</div>
    </section>

    <transition name="fade">
      <Loading class="overlay" v-if="busy"></Loading>
    </transition>
  </form>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    operation: {
      type: Function,
      required: true
    },
    valid: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      error: null,
      busy: false
    };
  },
  methods: {
    async submit() {
      if (this.valid && !this.busy) {
        this.error = null;
        this.busy = true;
        try {
          await this.operation();
        } catch (error) {
          this.error = error.message;
        }
        this.busy = false;
      }
    }
  }
};
</script>